<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    td{
        border: 1px solid;
        height: 50px;
    }
    table{
        text-align: center;
        border: 1px solid ;
        width: 500px;
        border-collapse: collapse;
        line-height: 50px;
    }

</style>
<body>
<!--    <table id="table"></table>-->

</body>
<script>
    data = [
        {
            name:"张三",age:18,salary:4512
        },
        {
            name:"张三",age:19,salary:4532
        },
        {
            name:"张三",age:20,salary:4212
        },
        {
            name:"张三",age:21,salary:4112
        },
        {
            name:"张三",age:22,salary:4412
        },
        {
            name:"张三",age:23,salary:3512
        }
    ]
    // 插入表头
    let table = document.getElementById('table')
    let tr = document.createElement('tr')
    table.appendChild(tr)
    let td = document.createElement('td')
    tr.appendChild(td)
    td.innerText = '序号'
    for (let key in data[0]) {
        td = document.createElement('td')
        tr.appendChild(td)
        td.innerHTML = key
    }
    for (let i = 0; i < data.length; i++) {
        tr = document.createElement('tr')
        table.appendChild(tr)
        td = document.createElement('td')
        tr.appendChild(td)
        td.innerText = String(i + 1)
        for (let key in data[i]) {
            td = document.createElement('td')
            tr.appendChild(td)
            td.innerHTML = data[i][key]
        }
    }


</script>
</html>